<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/promise.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/webim.config.js"></script>
		<script type="text/javascript" src="js/strophe-1.2.8.min.js"></script>
		<script type="text/javascript" src="js/websdk-1.4.10.js"></script>

		<!--表格部分START-->
		<script type="text/javascript" src="./UI/dependents/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./UI/dependents/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="./UI/dependents/fontAwesome/css/font-awesome.min.css" media="all" />
		<!-- DLShouWen Grid -->
		<script type="text/javascript" src="./UI/dlshouwen.grid.js"></script>
		<script type="text/javascript" src="./UI/i18n/en.js"></script>
		<link rel="stylesheet" type="text/css" href="./UI/dlshouwen.grid.css" />
		<!-- datePicker -->
		<script type="text/javascript" src="./UI/dependents/datePicker/WdatePicker.js" defer="defer"></script>
		<link rel="stylesheet" type="text/css" href="./UI/dependents/datePicker/skin/WdatePicker.css" />
		<link rel="stylesheet" type="text/css" href="./UI/dependents/datePicker/skin/default/datepicker.css" />
		<!--表格部分END-->

		<style type="text/css">
			.login-content *,
			.con-table * {
				margin: 0;
				padding: 0;
			}
			
			.add-message {
				position: relative;
				font-size: 16px;
				margin: 0 auto;
				left: -150px;
				width: 600px;
			}
			
			.add-message:after {
				content: ' ';
				display: block;
				clear: both;
			}
			
			.add-message .add-button {
				cursor: pointer;
				line-height: 32px;
				display: inline-block;
				float: right;
				border-radius: 5px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;
				-webkit-tap-highlight-color: transparent;
				padding: 3px 10px;
				margin-bottom: 10px;
			}
			
			.add-button img {
				height: 30px;
				vertical-align: middle;
				margin-top: -5px;
			}
			
			.con-table {
				position: relative;
				font-size: 16px;
				margin: 0 auto;
				left: -150px;
				width: 600px;
				background: #fff;
				border-radius: 5px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;
				-webkit-tap-highlight-color: transparent;
			}
			
			.login-content {
				text-align: center;
			}
			
			.login-content input {
				width: 168px;
			}
			
			.login-content select {
				width: 174px;
			}
			
			.con-tr-head {
				text-align: center;
				line-height: 30px;
				background-color: #f0f0f0;
			}
			
			.con-tr {
				position: relative;
				width: 100%;
				display: block;
				border: 1px solid #CCCCCC;
				border-style: solid none none none;
			}
			
			.con-table .con-tr:nth-of-type(1) {
				border-style: none;
			}
			
			.con-tr:after {
				content: ' ';
				display: block;
				clear: both;
			}
			
			.con-td {
				min-width: 100px;
				height: 100px;
				float: left;
			}
			.con-tr:hover{
				background-color: #F5F5F5;
			}
			.con-td textarea {
				border: 1px solid #CCCCCC;
				border-style: none solid;
				padding: 5px;
				width: 100%;
				height: 100%;
				background-color: azure;
				line-height: 1.5;
				text-align: justify;
				text-justify: inter-word;
			}
			
			.con-tr-head .con-td {
				height: 30px;
			}
			
			.con-tr .con-td:nth-of-type(1) {
				text-align: center;
				width: 20%;
			}
			
			.con-tr .con-td:nth-of-type(2) {
				width: 60%;
			}
			
			.con-tr .con-td:nth-of-type(3) {
				text-align: center;
				width: 20%;
			}
			
			.con-table .con-tr,
			.con-td,
			.con-td textarea {
				resize: none;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
			}
			
			.dataStyle {
				font-style: italic;
				line-height: 100px;
			}
			
			.receivers {
				position: relative;
				line-height: 100px;
				cursor: pointer;
			}
			
			.receiverList {
				position: absolute;
				top: 0;
				right: -120px;
				width: 100px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;
				-webkit-tap-highlight-color: transparent;
				background: #fff;
			}
			
			.receiverList ul {
				list-style-type: none;
				padding: 10px;
			}
			
			.right-arrow {
				position: absolute;
				top: 45px;
				right: -13px;
			}
			
			.modal-black{
				display: none;
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: rgba(39,40,34,0.3);
				z-index: 998;
			}
			.add-box {
				position: fixed;
				width: 500px;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				max-height: 600px;
				z-index: 999;
				margin: auto;
				background-color: white;
			}
			.dlshouwen-grid-pager-status{
				display: none;
			}
			
		</style>
	</head>

	<body style="background: #fafafa;">

		<div class="modal-black"></div>
		<div class="add-box" style="height: auto;display: none;">
			<div style="width: 500px;" id="gridContainer_2_1_8"></div>
			<div style="width: 500px;text-align: center;" id="gridToolBarContainer_2_1_8"></div>
			<button onclick="getGrid_2_1_8CheckedRecordsLength()">点击获取人数</button>
		</div>
		<script type="text/javascript">
			//映射内容
			var sex = {
				1: '男',
				2: '女'
			};
			var degree = {
				1: '小学',
				2: '初中',
				3: '高中',
				4: '中专',
				5: '大学',
				6: '硕士',
				7: '博士',
				8: '其他'
			};
			
			var user = new Object();
			user.user_id = 'user_' + i;
			user.user_code = 'user_' + i;
			user.user_name = '模拟用户' + (Math.floor(Math.random() * 1000) + 10000) + '号';
			user.sex = (Math.floor(Math.random() * 2) + 1);
			user.salary = (Math.floor(Math.random() * 6000) + 6000);
			user.degree = (Math.floor(Math.random() * 8) + 1);
			user.time = new Date(Math.floor(Math.random() * 1096588800000) + 315504000000);
			user.time_stamp_s = Math.floor((Math.floor(Math.random() * 1096588800000) + 315504000000) / 1000);
			user.time_stamp_ms = Math.floor(Math.random() * 1096588800000) + 315504000000;
			user.string_date = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random() * 1096588800000) + 315504000000), 'yyyy-MM-dd');
			user.string_time = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random() * 1096588800000) + 315504000000), 'yyyy-MM-dd hh:mm:ss');
			
			var gridColumns_2_1_8 = [{
					id: 'user_code',
					title: '用户帐号',
					type: 'string',
					columnClass: 'text-center'
				},
				{
					id: 'user_name',
					title: '用户名称',
					type: 'string',
					columnClass: 'text-center'
				},
				{
					id: 'sex',
					title: '性别',
					type: 'string',
					codeTable: sex,
					columnClass: 'text-center'
				}
			];
			
			var gridOption_2_1_8 = {
				lang: 'zh-cn',
				ajaxLoad: false,
				check: true,
				checkWidth: 40,
				exportFileName: '用户列表',
				datas: datas,
				columns: gridColumns_2_1_8,
				gridContainer: 'gridContainer_2_1_8',
				toolbarContainer: 'gridToolBarContainer_2_1_8',
				tools: '',
				pageSize: 10,
				pageSizeLimit: [10, 20, 50]
			};
			
			
			var grid_2_1_8 = $.fn.dlshouwen.grid.init(gridOption_2_1_8);
			$(function() {
				grid_2_1_8.load();
			});
			function getGrid_2_1_8CheckedRecordsLength() {
				console.log(grid_2_1_8.getCheckedRecords());
				var recordCount = grid_2_1_8.getCheckedRecords().length;
				alert('您一共选择了 ' + recordCount + ' 条。');
			}
			
			
		</script>
		
		

		<div class="login-content" style="display: none;">
			</br>
			</br>
			</br>
			</br>
			</br>
			</br>
			<h2>
				管理员登录系统
				</br></br></br></br></br></br>
			</h2>
			<p>用户名：<input type="text" name="user" id="manager" value="" placeholder="请输入用户名" /></p>
			<p>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" name="managerName" id="password" value="" /></p>
			<p>应&nbsp;&nbsp;&nbsp;&nbsp;用：
				<select id="selectApp">
					<option selected="selected" value="lxgh-lxhg#fingercrm">指尖CRM</option>
				</select>
			</p>
			<p><button id="managerLogin">登录</button></p>
		</div>

		<div class="control-content" style="display: block;">
			</br>
			</br>
			</br>
			</br>
			</br>
			</br>
			<div class="add-message">
				<div class="add-button" onclick="showModel()">
					新增群发消息&nbsp;<img src="img/add-mes.png" />
				</div>
				<script type="text/javascript">
					function showModel(){
						$('.add-box,.modal-black').show();
					}
				</script>
			</div>

			<div class="con-table">
				<div class="con-tr con-tr-head">
					<div class="con-td">日期</div>
					<div class="con-td">推送内容</div>
					<div class="con-td">接收人</div>
				</div>

				<div class="con-tr">
					<div class="con-td">
						<span class="dataStyle">2017-05-01</span>
					</div>
					<div class="con-td">
						<textarea>推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容</textarea>
					</div>
					<div class="con-td">
						<div class="receivers">
							接收人
							<img class="right-arrow" src="img/right-arrow.png" />
						</div>
					</div>
				</div>

				<div class="con-tr">
					<div class="con-td">
						<span class="dataStyle">2017-05-01</span>
					</div>
					<div class="con-td">
						<textarea>推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容</textarea>
					</div>
					<div class="con-td">
						<div class="receivers">接收人</div>
					</div>
				</div>

				<div class="con-tr">
					<div class="con-td">
						<span class="dataStyle">2017-05-01</span>
					</div>
					<div class="con-td">
						<textarea>推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容</textarea>
					</div>
					<div class="con-td">
						<div class="receivers">接收人</div>
					</div>
				</div>

				<div class="con-tr">
					<div class="con-td">
						<span class="dataStyle">2017-05-01</span>
					</div>
					<div class="con-td">
						<textarea>推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容推送内容</textarea>
					</div>
					<div class="con-td">
						<div class="receivers">接收人</div>
					</div>
				</div>

				<div class="receiverList">
					<ul>
						<li>
							<input type="checkbox" name="" id="" value="" />甲乙丙
						</li>
						<li>
							<input type="checkbox" name="" id="" value="" />甲乙丙
						</li>
						<li>
							<input type="checkbox" name="" id="" value="" />甲乙丙
						</li>
						<li>
							<input type="checkbox" name="" id="" value="" />甲乙丙
						</li>
						<li>
							<input type="checkbox" name="" id="" value="" />甲乙丙
						</li>
						<li>
							<input type="checkbox" name="" id="" value="" />甲乙丙
						</li>
					</ul>
				</div>

			</div>

		</div>

		</script>

		<div style="display: none;">

			<div class="chatbar">
				<div class="messageTit">聊天</div>
				<div class="messageNow">您有新消息未读</div>
			</div>

			<!-------------------------聊天系统dom结构START---------------------------->
			<div class="chatbox">

				<!-----点击按钮打开聊天界面----->
				<div class="chatslectbar">
					<div class="myhead"></div>
					<div class="myname">朱霄</div>
					<div class="chattabs">
						<img class="chatbartab on" src="img/chat.png" />
						<img class="chatbartab" src="img/group.png" />
						<img class="chatbartab notice" src="img/group.png" />
					</div>
				</div>

				<!--------聊天主界面--------->
				<div class="chatclass">
					<!--好友聊天-->
					<div class="onechat">
						<div class="contact">
							<div class="contactsearch">
								<input type="" name="" id="contactsearch" value="" placeholder="查找联系人" />
								<img id="search" src="img/search.png" />
							</div>
							<ul id="contactlist" class="contactlist">
								<li>
									<div class="organization" data-orgid="0"></div>
								</li>
							</ul>
						</div>

						<div class="chatwindow">
							<div class="chattitle">
								<p id="chattitlecon"></p>
								<img class="close" src="img/close.png" />
							</div>
							<div class="chat" id="chatList"></div>
							<div class="chatinput">
								<input id="inputcon" type="text" maxlength="200" />
								<img class="emojiicon" src="img/emoji.png" />
								<input id="sentbtn" type="button" value="发送" />
							</div>
						</div>
					</div>

					<!--群组聊天-->
					<div class="groupchat">
						<div class="contact">
							<div class="contactsearch">
								<input type="" name="" id="searchgroup" value="" placeholder="创建群聊" />
								<img style="cursor:pointer;" src="img/search.png" />
							</div>
							<ul id="grouplist" class="contactlist"></ul>
						</div>

						<div class="chatwindow">
							<div class="chattitle">
								<p id="groupTitlecon"></p>
								<img class="close" src="img/close.png" />
							</div>
							<div class="chat" id="groupList"></div>
							<div class="chatinput">
								<input id="inputcon2" type="text" />
								<img class="emojiicon" src="img/emoji.png" />
								<input id="sentbtn2" type="button" value="发送" />
							</div>
						</div>
					</div>

					<!--通知栏-->
					<div>
						<div class="contact" style="height: 400px;">
							<ul id="noticeList" class="contactlist">
								<li>
									<p class="alertcontent">确定添加<span style="color:coral;">test1</span>?</p>
									<p class="btns">
										<button class="w-btn" onclick="notifi._close(true);">确定</button>
										<button class="w-btn" tabindex="1" onclick="notifi._close(false);">取消</button>
									</p>
								</li>

								<li>
									<p class="alertcontent">确定添加<span style="color:coral;">test1</span>?</p>
									<p class="btns">
										<button class="w-btn" onclick="notifi._close(true);">确定</button>
										<button class="w-btn" tabindex="1" onclick="notifi._close(false);">取消</button>
									</p>
								</li>

								<li>
									<p class="alertcontent">确定添加<span style="color:coral;">test1</span>?</p>
									<p class="btns">
										<button class="w-btn" onclick="notifi._close(true);">确定</button>
										<button class="w-btn" tabindex="1" onclick="notifi._close(false);">取消</button>
									</p>
								</li>

							</ul>
						</div>
					</div>

				</div>

			</div>
			<!-------------------------聊天系统dom结构END---------------------------->

		</div>

		<script type="text/javascript" src="js/utils.js"></script>
	</body>

</html>